<template>
    <!-- <div class="class-app">
        
    </div> -->
    <div class="app">
        <div class="img">
            <img v-if="props.amount>10" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>20" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
         <div class="img">
            <img v-if="props.amount>30" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>40" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>50" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>60" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>70" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>80" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>90" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
        <div class="img">
            <img v-if="props.amount>=100" :key="value" src="../../../assets/img/person-b.png" alt="">
            <img v-else :key="value" src="../../../assets/img/person-r.png" alt="">            
        </div>
    </div>
</template>
<script  setup lang="ts">
const props = defineProps({
  amount: {
    type: Number,
    default: 20
  }
})
</script>
<style lang="less" scoped>
.class-app{
    width: 100%;
    height: 100%;
}
.app{
    width: 300px;
    display: flex;
}
.img{
    width: 30px;
    height: 30px;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>